<!--
 * @Author: 雷佳斌 leijiabin@yunjinhz.com
 * @Date: 2024-04-28 14:43:44
 * @LastEditors: 雷佳斌 leijiabin@yunjinhz.com
 * @LastEditTime: 2024-05-08 17:52:16
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\threeMembersTeamWork\teamworkStatistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->

    <view class="content u-page">

		<view class="top-month">
			<view class="title">工作协同完成情况</view>
				<view class="month" @click="handleYearMonthClick">
					<u-button type="primary" shape="circle" @click="handleYearMonthClick">{{ currYearMonthStr }}</u-button>
				</view>
			</view>

			<u-picker v-if="yearMonthSelShow" mode="time" v-model="yearMonthSelShow" :default-time="year+'-'+month" :params="timeParams" @confirm="handleYearMonthConfig"></u-picker>

			<view class="card">
				<view class="list">
					<view class="list-item" v-for="item of list" :key="item.orgUuid" @click="handleItemClick(item)">
						<view class="list-item__left">
							<view class="orgName">{{ item.orgName }}</view>
						</view>
						<view class="list-item__right">
							<view>
								<text style="margin-right: 15rpx;">{{ item.percentage }}%</text>
								<u-icon name="play-right-fill" color="#2979ff" size="28"></u-icon>
							</view>
							<view style="padding: 4rpx 0 10rpx;">
								<u-line-progress type="primary" :percent="item.percentage" duration="2000"></u-line-progress>
							</view>
							<view style="display: flex; justify-content: space-between;">
								<view>
									<text style="font-weight: 600; margin-right: 10rpx;">{{ item.done }}</text>
									<text style="color: #999;">已完成</text>
								</view>
								<view>
									<text style="margin-right: 10rpx; color: #999;">协同总数</text>
									<text style="font-weight: 600;">{{ item.total }}</text>
									<text style="margin-right: 10rpx; color: #999; margin-left: 15rpx;">协同项总数</text>
									<text style="font-weight: 600;">{{ item.itemTotal || 0 }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>
  </view>
</template>

<script>
import threeTeamworkService from "@/service/threeTeamwork/three.teamwork.service.js";

export default {

	data() {
		return {
			userInfo: this.$store.state.userInfo,
			list: [],
			year: "",
			month: "",
			yearMonthSelShow: false,
			timeParams: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
		}
	},
	computed: {
		currYearMonthStr() {
			return this.year+"年"+this.month+"月"
		}
	},
	created() {
		// if (this.userInfo.orgLevel >= 3) {
		// 	this.$u.route({
		// 		url: "/pages/threeMembersTeamWork/teamworkStatisticsByCounty",
		// 	});
		// }
	},
	onLoad() {
		let date = new Date();
		let currYear = date.getFullYear();
		let currMonth = date.getMonth();
		let currMonthStr = (currMonth+1) > 9 ? (currMonth+1) : "0"+(currMonth+1);
		this.year = currYear;
		this.month = currMonthStr;

		this.getListData();
	},
	methods: {
		// 获取统计列表
		getListData() {
			this.$modal.showLoading('数据加载中...');
			threeTeamworkService.getCoordinationTaskData({
				page: 1,
				limit: 99,
				taskDate: this.year + "-" + this.month
			}).then(res => {
				this.$modal.hideLoading();
				if (res.success) {
					this.list = res.data.map(item => {
						item.orgName = item.orgName.replace(/烟草专卖局/g, "");
						return item;
					})
				} else {
					this.$u.toast(res.msg);
				}
			}).catch(() => {
				this.$u.toast("数据加载失败!");
				this.$modal.hideLoading();
			})
		},
		handleYearMonthClick() {
			this.yearMonthSelShow = true;
		},
		handleYearMonthConfig(e, index) {
			this.year = e.year;
			this.month = e.month;
			this.getListData();
		},
		handleItemClick(data) {
			this.$u.route({
				url: "/pages/threeMembersTeamWork/teamworkStatisticsByCounty",
				type: "to",
				params: {
					orgUuid: data.orgUuid,
					orgName: data.orgName,
					month: this.year + "-" + this.month
				},
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
	}

	.top-month {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
		margin-top: 40rpx;
		.title {
			font-size: 32rpx;
		}
	}

	.list {
		&-item {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			margin: 30rpx 0;
			&__left {
				font-weight: 600;
				font-size: 34rpx;
			}
			&__right {
				flex: 1;
				text-align: right;
				padding-left: 20rpx;
				font-size: 30rpx;
			}
		}
	}
</style>